<template>
  <el-dialog
    :visible.sync="visible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    class="confirm-dialog"
  >
    <div class="dialog-content">
      <div class="dialog-icon" v-if="type">
        <i :class="iconClass"></i>
      </div>
      
      <div class="dialog-message">
        <p class="message-text">{{ message }}</p>
        <p class="message-detail" v-if="detail">{{ detail }}</p>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button 
        @click="handleCancel"
        :disabled="loading"
      >
        {{ cancelText }}
      </el-button>
      
      <el-button 
        :type="confirmButtonType"
        @click="handleConfirm"
        :loading="loading"
      >
        {{ confirmText }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  
  props: {
    // 是否显示
    value: {
      type: Boolean,
      default: false
    },
    
    // 标题
    title: {
      type: String,
      default: '确认操作'
    },
    
    // 消息内容
    message: {
      type: String,
      required: true
    },
    
    // 详细信息
    detail: {
      type: String,
      default: ''
    },
    
    // 对话框类型
    type: {
      type: String,
      default: 'warning',
      validator: value => ['info', 'success', 'warning', 'error'].includes(value)
    },
    
    // 宽度
    width: {
      type: String,
      default: '420px'
    },
    
    // 确认按钮文本
    confirmText: {
      type: String,
      default: '确定'
    },
    
    // 取消按钮文本
    cancelText: {
      type: String,
      default: '取消'
    },
    
    // 是否加载中
    loading: {
      type: Boolean,
      default: false
    }
  },
  
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    
    iconClass() {
      const iconMap = {
        info: 'el-icon-info',
        success: 'el-icon-success',
        warning: 'el-icon-warning',
        error: 'el-icon-error'
      }
      
      return `${iconMap[this.type]} dialog-type-icon dialog-type-${this.type}`
    },
    
    confirmButtonType() {
      const typeMap = {
        info: 'primary',
        success: 'success',
        warning: 'warning',
        error: 'danger'
      }
      
      return typeMap[this.type] || 'primary'
    }
  },
  
  methods: {
    handleConfirm() {
      this.$emit('confirm')
    },
    
    handleCancel() {
      this.$emit('cancel')
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.confirm-dialog {
  :deep(.el-dialog__header) {
    padding: 20px 20px 10px;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 10px 20px 20px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 10px 20px 20px;
    text-align: right;
  }
}

.dialog-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dialog-icon {
  flex-shrink: 0;
  
  .dialog-type-icon {
    font-size: 24px;
    
    &.dialog-type-info {
      color: #409eff;
    }
    
    &.dialog-type-success {
      color: #67c23a;
    }
    
    &.dialog-type-warning {
      color: #e6a23c;
    }
    
    &.dialog-type-error {
      color: #f56c6c;
    }
  }
}

.dialog-message {
  flex: 1;
  
  .message-text {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #303133;
  }
  
  .message-detail {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #606266;
  }
}

.dialog-footer {
  .el-button {
    margin-left: 12px;
    
    &:first-child {
      margin-left: 0;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .confirm-dialog {
    :deep(.el-dialog) {
      width: 90% !important;
      margin: 0 auto;
    }
  }
  
  .dialog-content {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .dialog-footer {
    .el-button {
      width: 100%;
      margin: 0 0 8px 0;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>